<template>
  <div ref="chartRef" :style="{ width: '100%', height: '240px' }"></div>
</template>


<script setup>
import * as echarts from "echarts";
import { defineProps, onMounted, ref, watch } from "vue";
const props = defineProps({
  chartType: {
    default: "bar",
  },
  options: {
    default: () => ({}),
  },
});

const chartRef = ref(null);
let chartInstance = null;

watch(
  () => props.options,
  () => {
    if (chartInstance) {
      chartInstance.setOption(props.options);
    }
  }
);
const initChart = () => {
  chartInstance = echarts.init(chartRef.value);
  chartInstance.setOption({
    ...props.options,
    series: [
      {
        data: props.options.series && props.options.series[0].data,
        type: props.chartType,
      },
    ],
  });
};


onMounted(()=>{
    initChart()
})

</script>

<style lang="less" >


</style>